<template>
  <el-select
    v-model="selectId"
    clearable
    filterable
    :placeholder="$language.local('请选择')"
    @change="selectChange"
    @visible-change="getOptions"
    class="el-select"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.real_name"
      :value="item.real_name"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    value: [String, Number],
    customerId: [String, Number],
  },
  data() {
    return {
      selectId: this.value,
      options: [],
    };
  },

  methods: {
    async getOptions() {
      if (!this.customerId) {
        this.$message.error("请先选择渠道");
        return;
      }
      let query = {
        roleType: 5,
        customerId: this.customerId,
      };
      let response = await this.$http.get("/api/Common/GetUserList", query);
      this.options = response.data.Data;
    },
    selectChange(e) {
      let selectItem = this.options.find((v) => {
        return v.real_name == e;
      });
      this.$emit("change", selectItem);
      this.$emit("input", e);
    },
  },
};
</script>

<style lang="less" scoped>
.el-select {
  width: 100%;
}
</style>
